import React,{useEffect,useState} from "react" import axios from "axios" import './App.css'; import Move from "./Move"; function App() { const [data,setData] = useState([]); useEffect(()=> { axios.get("https://api.themoviedb.org/3/movie/popular?api_key={apikey}&language=en-US&page=1").then((res)=> { setData(res.data.results) }) },[]) return ( <div> <div className="App"> <input placeholder="enter something" /> <label></label> </div> { data.map(function(movie){ console.log(movie) const title = movie.title const id = movie.id return <Move key={id} title={title} /> })} </div> ); } export default App; Component Im Trying To Render import React from 'react' const Move = (title) => { return ( <div> <div>Move</div> <h1>{title}</h1> </div> ) } export default MoveEstoy tratando de obtener las propiedades de acceso del objeto, por ejemplo, el título, pero aparece el error "Los objetos no son válidos como un niño de React"
el objeto es:
{ "adult": false, "backdrop_path": "/iQFcwSGbZXMkeyKrxbPnwnRo5fl.jpg", "genre_ids": [ 28, 12, 878 ], "id": 634649, "original_language": "en", "original_title": "Spider-Man: No Way Home", "overview": "Peter Parker is unmasked and no longer able to separate his normal life from the high-stakes of being a super-hero. When he asks for help from Doctor Strange the stakes become even more dangerous, forcing him to discover what it truly means to be Spider-Man.", "popularity": 8450.164, "poster_path": "/1g0dhYtq4irTY1GPXvft6k4YLjm.jpg", "release_date": "2021-12-15", "title": "Spider-Man: No Way Home", "video": false, "vote_average": 8.4, "vote_count": 8021 }No estoy seguro de cual es el problema
const Move = (title) => { return ( <div> <div>Move</div> <h1>{title}</h1> </div> ); };
En este código, el title es todo el objeto de accesorios. Debe acceder solo a la propiedad del título en ese objeto:
const Move = (props) => { return ( <div> <div>Move</div> <h1>{props.title}</h1> </div> ); };O con desestructuración:
const Move = ({ title }) => { return ( <div> <div>Move</div> <h1>{title}</h1> </div> ); };import React from 'react' const Move = (prop) => { return ( <div> <div>Move</div> <h1>{prop.title}</h1> </div> ) }